<template>
  <div class="mx-auto mt-36 p-6 text-white max-w-[380px] border !border-white/50 rounded-xl">
    <div class="mb-4 w-full justify-start flex items-center">
      <img class="w-10 h-10" :src="DengTanPng" />
      <div class="text-xl ml-2">用户{{ title }}</div>
    </div>
    <div>账号未激活，请注意查收注册邮件的收件箱里面的验证码</div>
    <div class="text-sm text-orange-200 mb-4">如未收到，可联系发光如星公众号帮您查询</div>
    <div>
      <v-form ref="form" lazy-validation>
        <v-text-field
          v-model="formData.email"
          :rules="[rules.required]"
          label="注册邮箱"
          placeholder="请输入邮箱"
          name="email"
        ></v-text-field>
        <v-text-field
          v-model="formData.activeCode"
          :rules="[rules.required]"
          label="四位验证码"
          placeholder="请输入四位数的验证激活码"
          name="activeCode"
        ></v-text-field>
        <div class="flex w-full items-center">
                <div class="mr-2 flex-1" >
                  <v-text-field v-model="formData.code" :rules="[rules.required]" filled clearable
                  label="验证码"
                  name="code"></v-text-field>
                </div>
                <img  class="w-24 h-full mb-2" :src="`data:image/gif;base64,${codeImg}`" @click="getCodeImg"></img>
            </div>
      </v-form>
      <div>
        <v-btn style="width: 320px" class="my-4" @click="submit"> 激活账号 </v-btn>
      </div>
      <div class="flex justify-between w-full">
        <v-btn variant="text" @click="toHome">回首页</v-btn>
        <v-btn variant="flat" @click="toLogin"> 登陆账号</v-btn>
      </div>
    </div>
  </div>
</template>

<script>
import DengTanPng from "@/assets/dengta.png";
import BackageContainer from "../../layout/BackageContainer.vue";
import JcBar from "../../layout/JcBar";
import { mapActions } from "vuex";
import { getCaptchaImage, register, activeMember } from "@/api/cloudbase-login.js";
export default {
  name: "MemberValidate",
  components: { JcBar, BackageContainer },

  computed: {
    title() {
      return "验证";
    },
  },
  data() {
    return {
      rules: {
        required: (value) => !!value || "必填项",
        min: (v) => v.length >= 8 || "Min 8 characters",
      },
      formData: {
        email: "",
        activeCode:""
      },
      codeImg: "",
      DengTanPng,
    };
  },

  mounted() {
    this.getCodeImg();
    const params = this.getParams();
    this.formData.email = params.email;
    this.formData.activeCode = params.code;
  },

  methods: {
    ...mapActions("login", ["login"]),

    getParams() {
      return this.$route.query;
    },

    toReg() {
      this.$router.push("/register");
    },
    async getCodeImg() {
      try {
        const res = await getCaptchaImage();
        this.codeImg = res.img;
        this.formData.uuid = res.uuid;
      } catch (error) {
        console.log("获取验证码错误-->", error);
      }
    },
    toLogin() {
      this.$router.replace("/login")
    },

    async submit() {
      const valid = this.$refs.form.validate();
      if (!valid) {
        return;
      }
      try {
        await activeMember(this.formData);
        this.$toast.success("账号激活成功");
        this.toLogin();
      } catch (error) {
        this.getCodeImg();
      }
    },
    toHome() {
      this.$router.replace("/home");
    },
  },
};
</script>

<style scoped></style>
